<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import scanIcon from "@/static/images/home-scan.png";
import outIcon from "@/static/images/home-out.png";
import checkIcon from "@/static/images/home-check.png";
import carCheckIcon from "@/static/images/home-car-check.png";
import goodsCheckIcon from "@/static/images/home-goods-check.png";
import logouIcon from "@/static/images/home-logout.png";
import missingIcon from "@/static/images/home-missing.png";
import shipmentIcon from "@/static/images/home-shipment.png";
import { useUserStore } from "@/store";

const SCAN_STORE_ID = "START_CHECK_SCAN";
const SCAN_STORE_OUT_ID = "OUTBOUND_SCAN";

const userStore = useUserStore();

const topMenu = [
	{
		label: "快速清点",
		icon: checkIcon,
		event: () => {
			uni.navigateTo({
				url: `/pages/scan/index?id=${SCAN_STORE_ID}&type=check`,
			});
			// uni.navigateTo({ url: "/pages/startCheck/index?type=scan" });
		},
	},
	{
		label: "出库装车",
		icon: outIcon,
		event: () => {
			uni.navigateTo({ url: "/pages/typeChoose/index" });
			/* uni.navigateTo({
				url: `/pages/scan/index?id=${SCAN_STORE_ID}&type=outbound`,
			}); */
			// uni.navigateTo({ url: "/pages/outbound/index" });
		},
	},
	{
		label: "扫码入库",
		icon: scanIcon,
		event: () => {
			uni.navigateTo({ url: "/pages/carList/index" });
		},
	},
	{
		label: "出货扫描",
		icon: shipmentIcon,
		event: () => {
			uni.navigateTo({ url: "/pages/carList/index?type=shipment" });
		},
	},
];
const middleMenu = [
	{
		label: "提货拆板",
		icon: goodsCheckIcon,
		event: () => {
			console.log("goodsCheck");
			uni.navigateTo({ url: "/pages/delivery/index" });
		},
	},
	{
		label: "车单查询",
		icon: carCheckIcon,
		event: () => {
			uni.navigateTo({ url: "/pages/logisticsSearch/index" });
		},
	},
	{
		label: "缺件查询",
		icon: missingIcon,
		event: () => {
			uni.navigateTo({ url: "/pages/missingSearch/index" });
		},
	},
	{
		label: "退出登录",
		icon: logouIcon,
		event: () => {
			return handleToLogout();
		},
	},
];

// 登出
const handleToLogout = () => {
	userStore.logout();
};
</script>

<template>
	<Card class="home-domain-container">
		<wd-row class="row" :gutter="20">
			<wd-col :span="8" v-for="item in topMenu" :key="item.label" class="item item-nomal" @click="item.event">
				<view class="inner">
					<wd-img :src="item.icon" class="icon" />
					<view class="text">{{ item.label }}</view>
				</view>
			</wd-col>
		</wd-row>
		<wd-row class="row" :style="{ flexWrap: 'wrap' }" :gutter="20">
			<wd-col :span="8" v-for="item in middleMenu" :key="item.label" class="item item-dark" @click="item.event">
				<view class="inner">
					<wd-img :src="item.icon" class="icon" />
					<view class="text">{{ item.label }}</view>
				</view>
			</wd-col>
		</wd-row>
	</Card>

	<wd-toast></wd-toast>
</template>

<style lang="less" scoped>
.home-domain-container {
	padding: 30px 20px;
	margin-top: 30px;

	.row {
		display: flex;
		justify-content: space-between;
	}

	.icon {
		width: 100px;
		height: 100px;
	}

	.item {
		margin-bottom: 40px;

		.inner {
			padding: 30px 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.text {
			font-size: 32px;
			margin-top: 25px;
		}
	}

	.item-dark {
		background-color: #449deb;

		.text {
			color: #fff;
		}
	}
}
</style>
